<template>
  <div>
    <!--  1.用户信息-->
    <div class="div1" style="background: darkturquoise">
      <van-row justify="center" align="center">
        <van-col offset="1" span="6">

          <van-image
              round
              style="margin-top: 1rem"
              width="4rem"
              height="4rem"
              src="https://img0.baidu.com/it/u=2006453644,3253735514&fm=253&fmt=auto&app=138&f=JPEG?w=281&h=499"
          />
        </van-col>
        <van-col span="8">
          <van-button v-if="this.$store.state.token.length==0" type="success" @click="tzLogin()">登录账号</van-button>
          <label v-else>{{this.$store.state.user.phone}}</label>
        </van-col>
      </van-row>
    </div>
    <!--  2.功能-->
    <div>
      <van-divider content-position="left"
                   :style="{ borderColor: '#1989fa' }"
      >
        个人中心
      </van-divider>
      <van-grid :border="false" gutter="20">
        <van-grid-item icon="goods-collect-o" icon-color="orange" text="收藏"/>
        <van-grid-item icon="completed" icon-color="orange" text="待评价" />
        <van-grid-item icon="eye-o" icon-color="orange" text="最近浏览" />
        <van-grid-item icon="points" icon-color="orange" text="积分" />
      </van-grid>
    </div>
<!--    <div>-->

<!--&lt;!&ndash;      <van-grid :border="false" gutter="20">&ndash;&gt;-->
<!--&lt;!&ndash;        <van-grid-item icon="orders-o" icon-color="red" text="订单" />&ndash;&gt;-->
<!--&lt;!&ndash;        <van-grid-item icon="photo-o" icon-color="red" text="卡券" />&ndash;&gt;-->
<!--&lt;!&ndash;        <van-grid-item icon="points" icon-color="red" text="积分" />&ndash;&gt;-->
<!--&lt;!&ndash;        <van-grid-item icon="balance-o" icon-color="red" text="钱包" />&ndash;&gt;-->
<!--&lt;!&ndash;      </van-grid>&ndash;&gt;-->
<!--    </div>-->
    <!--  3.工具菜单-->
    <div>

      <van-cell-group title="系统设置">
        <van-cell title="账号与安全" is-link url="https://github.com" />
        <van-cell title="帮助反馈" is-link to="index" />
        <van-cell title="消息通知" is-link to="index" />
        <van-cell title="关于我们" is-link to="index" />
        <van-cell title="隐私" is-link to="index" />
        <van-cell title="通用" is-link to="index" />
        <van-cell title="检测版本" is-link to="index" />
        <van-button type="primary" block>注销账号</van-button>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
export default {
  name: "My",
  data(){
    return{
      user:{
        phone:"111",
        password:"2222",
        flag:1
      }
    }
  },
  methods:{
    tzLogin(){
      this.$router.push("/login");
    },
    tzback(){
      history.back();
    },
  }
}
</script>

<style scoped>
.dv1{
  height: 6rem;
  background-color: antiquewhite;
}
</style>